import React from "react";
import { Button, Select, Table } from "antd";

class ApiAndSlot extends React.Component {
	render() {
		const {
			apiData,
			slotData,
			addSlotApiRelations,
			apiAndSlotData,
			fixRelationData,
			removeSlotApiRelations,
			urlPrefix,
		} = this.props;
		const columns = [
			{
				title: "词槽",
				dataIndex: "slotKey",
				width: "30%",
				render: (text, record, index) =>
					slotData.length > 0 ? (
						<Select
							placeholder={"选择词槽"}
							value={text}
							style={{ width: 200 }}
							onChange={(e) => fixRelationData(e, record, index, "slot")}
							disabled={urlPrefix}
							key={"slotKey_" + index}>
							{slotData.map((slot) => {
								return (
									<Select.Option
										value={slot.key ? slot.key : slot.keyName}
										key={slot.key ? slot.key : slot.keyName}>
										&lt;{slot.name}&gt;
									</Select.Option>
								);
							})}
						</Select>
					) : null,
			},
			{
				title: "API字段-请求字段",
				dataIndex: "apiFieldId",
				render: (text, record, index) => (
					<Select
						placeholder={"选择API请求字段"}
						value={text}
						style={{ width: 200 }}
						onChange={(e) => fixRelationData(e, record, index, "api")}
						key={"apiFieldId_" + index}
						disabled={urlPrefix}>
						{apiData.requestFields
							? apiData.requestFields.map((api, index) => {
									return (
										<Select.Option value={api.id} key={api.id}>
											#{api.name}#
										</Select.Option>
									);
							  })
							: null}
					</Select>
				),
			},
			{
				title: "操作",
				render: (text, record, index) => (
					<Button
						type={"primary"}
						disabled={urlPrefix}
						onClick={() => removeSlotApiRelations(index)}>
						删除
					</Button>
				),
			},
		];
		return (
			<div style={{ margin: "10px 0px" }}>
				<div>词槽与字段的对应关系</div>
				<Table
					bordered
					dataSource={apiAndSlotData}
					columns={columns}
					pagination={false}
					rowKey={(record, index) => index}
				/>
				<Button
					onClick={addSlotApiRelations}
					type={"primary"}
					disabled={urlPrefix}
					style={{ marginTop: 10 }}>
					添加
				</Button>
			</div>
		);
	}
}

export default ApiAndSlot;
